@labelcolor: rgb(226, 226, 226);
@labelFontsize: 32px;
@iconFontsize: 36px;
@focusColor: rgb(148, 113, 245);

.login {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	background: linear-gradient(200deg, skyblue 20%, #0095d1 100%);
	&-title {
		font-size: 58px;
		font-weight: 600;
		margin-bottom: 200px;
		color: #fff;
	}
	&-container {
		width: 80%;
    padding-bottom: 180px;
		label[for='username']:focus {
			color: red;
		}
		.username,
		.password {
			position: relative;
			display: flex;
			align-items: center;
			padding: 20px 0;
			margin-bottom: 20px;
			&::before {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 1px;
				background-color: @labelcolor;
			}
			&::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				left: 0;
				width: 0%;
				height: 1px;
				background-color: @focusColor;
				transition: width 0.4s;
			}
			.label {
				color: @labelcolor;
				width: 60px;
				text-align: center;
				margin-right: 10px;
				.iconfont {
					font-size: @iconFontsize;
				}
			}
			input {
				flex: 1;
				.input();
				color: @labelcolor;
				&::-webkit-input-placeholder {
					color: @labelcolor;
					font-size: @labelFontsize;
				}
			}

			&.focus {
				&::after {
					width: 100%;
				}
			}
		}
	}
	&-btn {
		margin-top: 80px;
		button {
			width: 100%;
			background: linear-gradient(
				to right,
				rgb(56, 188, 221) 0%,
				rgb(93, 240, 129) 100%,
			) !important;
			border: none !important;
			color: #fff !important;
		}
	}
}
